<!DOCTYPE html>
<html>
<@h.head />
<body class="homepage">
	<@h.nav />
	<section id="main-slider" class="no-margin">
        <div class="carousel slide" data-ride="carousel">
        	<#if (carouselPathDto?size > 0)>
            <ol class="carousel-indicators">
            	<#list carouselPathDto as record>
            	<li data-target="#main-slider" data-slide-to="${record_index}" class="<#if (record_index==0)>active</#if>"></li>
            	</#list>
            </ol>
            </#if>
            <div class="carousel-inner">
            	<#list carouselPathDto as record>
            	<#if record.path?ends_with(".mp4")>
            	<div class="item <#if (record_index==0)>active</#if>">
            		<video height="100%" width="100%" onmouseenter="this.controls='controls'" onmouseout="this.controls=''">
            			<source src="${(record.path)!}"/>
            		</video>
            	</div>
            	<#else>
            	<div class="item <#if (record_index==0)>active</#if>" mobileUrl="${(record.path3)!''}" style="background-image: url('${(record.path)!}');">
                    <div class="container">
                        <div class="row slide-margin">
                            <div class="col-sm-6">
                                <div class="carousel-content">
                                    <h1 class="animation animated-item-1" style="color: ${(record.desc)!'#808080'}">${(record.name)!}</h1>
                                    <h2 class="animation animated-item-2" style="color: ${(record.desc)!'#808080'}">${(record.content)!}</h2>
                                    <!-- <a class="btn-slide animation animated-item-3" href="#">Read More</a> -->
                                </div>
                            </div>

                            <div class="col-sm-6 hidden-xs animation animated-item-4">
                                <div class="slider-img">
                                	<#if (record.path2)??>
									<a href="${(record.path3)!'#'}">
                                    <img src="${(record.path2)!}" class="img-responsive">
                                    </a>
                                    </#if>
                                </div>
                            </div>

                        </div>
                    </div>
                </div><!--/.item-->
				</#if>
            	</#list>
            </div><!--/.carousel-inner-->
        </div><!--/.carousel-->
    </section><!--/#main-slider-->
    
    
    <section id="portfolio">
        <div class="container">
            <div class="center wow fadeInDown">
               <h2>${(recommendText.remark)!}</h2>
               <p class="lead">${(recommendText.html)!}</p>
            </div>
            <!-- <ul class="portfolio-filter text-center">
                <li><a class="btn btn-default active" href="#" data-filter="*">跑步机</a></li>
                <li><a class="btn btn-default" href="#" data-filter=".class_b">椭圆机</a></li>
                <li><a class="btn btn-default" href="#" data-filter=".class_c">立式直立车</a></li>
            </ul> --><!--/#portfolio-filter -->

            <div class="row">
                <div class="portfolio-items">
                	<#list productPathDto as record>
                		<div class="portfolio-item_index col-xs-12 col-sm-6 col-md-6">
	                        <div class="recent-work-wrap">
	                            <img class="img-responsive" src="${(record.path)!}" alt="">
	                            <div class="overlay">
	                                <div class="recent-work-inner">
	                                    <h3><a href="${path}/product/detail/${(record.id)!}">${(record.name)!}</a></h3>
	                                    <p>${(record.content)!}</p>
	                                    <a class="preview fr" href="${path}/product/detail/${(record.id)!}"><i class="fa fa-eye"></i> VIEW MORE</a>
	                                </div> 
	                            </div>
	                        </div>
	                    </div><!--/.portfolio-item-->
                	</#list>
                </div>
                <ol class="carousel-page">
                	<#list 1..pagination.totalPage as t>
                	<#if t_index == 0>
	            		<li class="active" p="${t_index + 1}"></li>
	            	<#else>
	            		<li class="" p="${t_index + 1}"></li>
	            	</#if>
	            	</#list>
	            </ol>
            </div>
        </div>
    </section><!--/#portfolio-item-->
	<@h.foot />
</body>
<style>
h1 {
    font-family: Arial;
    font-size: 28px;
    font-weight: bold;
}
h2{
	line-height : 1.5;
}
@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
    0% {opacity: 0;}  
    100% {opacity: 1;}  
}  
.wrapper {    
    animation: fade-in;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/  
    -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
}
</style>
<script type="text/javascript">
// portfolio filter
$(window).load(function(){'use strict';
	var $portfolio_selectors = $('.portfolio-filter >li>a');
	var $portfolio = $('.portfolio-items');
	$portfolio.isotope({
		itemSelector : '.portfolio-item_index',
		layoutMode : 'fitRows'
	});
	
	$portfolio_selectors.on('click', function(){
		$portfolio_selectors.removeClass('active');
		$(this).addClass('active');
		var selector = $(this).attr('data-filter');
		$portfolio.isotope({ filter: selector });
		return false;
	});
});
$(window).resize(function(){
	//动太计算轮播图最小高度
	if ($(window).width() <= 858) {
		var percent = $(window).width()/1400;
		$(".item").css("min-height", (730*percent) + "px");
	}
});
$(function(){
	if(!isMobile.any()) {
    	$("video").attr("autoplay","autoplay");
    }else {
    	//非PC端轮播图链接
    	$(".carousel-inner .item").click(function(){
    		if ($(this).attr("mobileUrl") && $(this).attr("mobileUrl") != "") {
    			window.location.href = $(this).attr("mobileUrl");
    		}
    	})
    }
	$(window).resize();
	$(".carousel-page li").click(function(){
		if($(this).hasClass("active")) {
			return false;
		}
		$(".carousel-page li").removeClass("active");
		$(this).addClass("active");
		$.ajax({type:"post",
			   url : "${path}/getNewArrival",
			   data : {'page':$(this).attr("p")},
			   dataType : "json",
			   success : function(result) {
				   if (result.page.totalPage > 0) {
					   for (i = 0; i < result.page.rows; i++) {
						   var obj = result.list[i];
						   if(obj) {
							   $(".recent-work-wrap .img-responsive")[i].src = obj.path;
							   $(".overlay a.preview")[i].href = "${path}/product/detail/" + obj.id;
							   $(".overlay p")[i].innerText = obj.content;
							   $(".overlay h3 a")[i].innerText = obj.name;
							   $(".overlay h3 a")[i].href = "${path}/product/detail/" + obj.id;
							   $(".recent-work-wrap")[i].style.display = "";
						   } else {
							   $(".recent-work-wrap")[i].style.display = "none";
						   }
					   }
					   $(".recent-work-wrap .img-responsive").addClass("wrapper");
					   //图片加载完成后
					   $('.recent-work-wrap .img-responsive').load(function(){
						   $(".portfolio-items").resize();
					   });
				   }
				   setTimeout(function(){
					   $(".recent-work-wrap .wrapper").removeClass("wrapper");
				   }, 1600);
			   }
		});
	});
});
</script>
</html>